<template>
  <div class="dashboard-container">
    <div class="title">你好，尊贵的用户</div>
    <el-card class="header-card">
      <div class="header-card2">
        <el-card shadow="always" class="always" @click.native="$router.push('/clients')">
          <div>
            <i class="el-icon-user-solid" />
            <div class="aaa">
              <p>用户数量</p>
              <span>{{ userCount }}</span>
            </div>
          </div>
        </el-card>
        <el-card shadow="always" class="always" @click.native="$router.push('/properties')">
          <div>
            <i class="el-icon-document" />
            <div class="aaa">
              <p>房产数量</p>
              <span>{{ propertyCount }}</span>
            </div>
          </div>
        </el-card>
        <el-card shadow="always" class="always" @click.native="$router.push('/categories')">
          <div>
            <i class="el-icon-s-help" />
            <div class="aaa">
              <p>房产类别</p>
              <span>{{ categoriesCount }}</span>
            </div>
          </div>
        </el-card>
        <el-card shadow="always" class="always" @click.native="$router.push('/users')">
          <div>
            <i class="el-icon-view" />
            <div class="aaa">
              <p>房产中介</p>
              <span>{{ economic }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>

    <el-row type="flex" justify="space-between">
      <el-col style="padding-right: 26px">

        <el-card class="box-card">
          <Bar />
          <!-- <div class="advContent" /> -->
        </el-card>
      </el-col>
      <el-col>
        <el-card class="time">
          <Pie />
        </el-card>
        <!-- <div class="box">
            <div class="line line1" />
            <div class="line line2" />
            <div class="line line3" />
            <div class="line line4" />
            <div class="line line5" />
            <div class="line line6" />
            <div class="center">
              <div class="point" />
              <div class="seconds" />
              <div class="min" />
              <div class="hour" />
            </div>

          </div> -->

      </el-col>
    </el-row>
  </div>
</template>

<script>
import Bar from './components/bar'
import Pie from './components/pie.vue'
import { getClients } from '@/api/clients'
import { getPropertyCount } from '@/api/properties'
import { getCategoriesCount } from '@/api/categories'
import { getEmployee } from '@/api/employee'
export default {
  components: {
    Bar, Pie
  },
  data() {
    return {
      userCount: 0,
      propertyCount: 0,
      categoriesCount: 0,
      economic: 0
    }
  },
  async created() {
    const res = await getClients()
    // console.log(99, res)
    this.userCount = res.data.length
    const res2 = await getPropertyCount()
    this.propertyCount = res2.data
    const res3 = await getCategoriesCount()
    this.categoriesCount = res3.data
    const res4 = await getEmployee()
    console.log(106, res4)
    this.economic = res4.data.length
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 10px;
  li {
    list-style: none;
  }
}
.header-card {
  .header-card2 {
    display: flex;
    justify-content: space-between;
  }
  .always {
    width: 23%;
    .aaa {
      float: right;
      margin-right: 30px;
      font-size: 18px;
      font-weight: 700;
      margin-top: -10px;
    }
  }
  i {
    font-size: 60px;
    margin-top: 8px;
  }
  .el-icon-user-solid {
    color: #36a3f7;
  }
  .el-icon-document {
    color: #fac657;
  }
  .el-icon-s-help {
    color: #f2506a;
  }
  .el-icon-view {
    color: #61cab2;
  }
}
.box-card {

  margin-top: 20px;
}
.Pie{

padding: 0 !important;
  overflow: hidden;
}

</style>

 <style  lang="scss" scoped>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 50%;
        }

        .line {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%) rotate(0);
            width: 100%;
            height: 2px;
            background: green;

        }

        .line2 {
            transform: translateY(-50%) rotate(30deg);
        }

        .line3 {
            transform: translateY(-50%) rotate(60deg);
        }

        .line4 {
            transform: translateY(-50%) rotate(90deg);
        }

        .line5 {
            transform: translateY(-50%) rotate(120deg);
        }

        .line6 {
            transform: translateY(-50%) rotate(150deg);
        }

        .center,
        .point {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;

        }

        .center {

            width: 90%;
            height: 90%;
            background: #fff;

        }

        .point {
            width: 7%;
            height: 7%;
            background: red;
            z-index: 5;
        }

        .min,
        .hour,
        .seconds {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%) rotate(0);
            transform-origin: bottom;
        }

        .seconds {
            width: 3px;
            height: 120px;
            background: skyblue;
            animation: move 60s infinite steps(60);
        }

        .min {
            width: 6px;
            height: 80px;
            background: orange;
            animation: move 3600s infinite steps(60);
        }

        .hour {
            width: 10px;
            height: 50px;
            background: rgb(0, 0, 0);
            animation: move 216000s infinite steps(60);
        }

        @keyframes move {
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
        .time{
          border: 1px solid transparent !important;

          height: 440px;
        margin-top: 20px;

        box-sizing: 0  10px #06ECEF,0  20px #0aafe6,0  30px #06ECEF,0  40px #0aafe6;;
      //  background-image: radial-gradient( #0198F9 60% ,#fff);
        ::v-deep  .el-card__body{
           padding: 0 !important;
        }
/* background-image: radial-gradient( #000 1%,#fff 30%,#000 ); */
        }
        .title{
          margin-top: 10px;
           text-shadow: 0 0 10px #06ECEF,0 0 20px #0aafe6,0 0 30px #06ECEF,0 0 40px #0aafe6;
          color: #fff;
          font-size: 50px;
        }

    </style>
